const comment = {
    date: new Date().toLocaleTimeString(),
    text: '我希望你能愉快的学习react',
    author: {
        name: 'Hello Kitty',
        avatarUrl: 'http://placekitten.com/g/64/64'
      }
  };
//   提取avator组件
function Avator(props){
    console.log(props);
    return(
        <img className="avatar"
        src={props?.user?.avatarUrl}
        alt={props?.user?.name}
      />
    )
}

function UserInfo(props) {
    return (
        <div className="UserInfo">
        <Avator user={props.author} />
         {/* 因为没有props，直接渲染会报错，所以我们在它的后面加上一个？，
         这样的话当没有props的时候，就会跳过不渲染，但是不会报错 */}
         <div className="UserInfo-name">
           {props?.author?.name}
         </div>
       </div>
    );
  }

  function Comment(props) {
    return (
      <div className="Comment">
       <UserInfo author={props.author} />
        <div className="Comment-text">
          {props.text}
        </div>
        <div className="Comment-date">
          {props.date}
        </div>
      </div>
    );
  }
//   定义默认的props
Comment.defaultProps = comment
  export default Comment